<template>
  <view class="date-picker">
    <u-icon name="arrow-left" size="24rpx" color="#999" @click="getYestoday"></u-icon>
    <u-text align="center" margin="0 20rpx" color="#333" size="34rpx" :text="modelValue"
      @click="showCalendar = true"></u-text>
    <u-icon name="arrow-right" size="24rpx" color="#999" @click="getNextDay"></u-icon>
  </view>
  <up-datetime-picker :show="showCalendar" mode="date" @confirm="confirmCalendar"
    @close="showCalendar = false"></up-datetime-picker>
</template>
<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
const showCalendar = ref(false);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);
const getYestoday = () => {
  console.log('昨天')
  calendarDate.value = dayjs(calendarDate.value).subtract(1, 'day').format('YYYY-MM-DD')
  emit('update:modelValue', calendarDate.value)
}

const getNextDay = () => {
  console.log('明天')
  calendarDate.value = dayjs(calendarDate.value).add(1, 'day').format('YYYY-MM-DD')
  emit('update:modelValue', calendarDate.value)
}

const confirmCalendar = (e) => {
  console.log(e)
  showCalendar.value = false
  emit('update:modelValue', e.value[0])
}
</script>
<style scoped lang="scss">
.date-picker {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
}
</style>